<template>
  <div id="MyBox">
    <div class="Myheader">
      <div class="TopMy">
        <div class="topLeft">
          <van-image
            round
            width="4.5rem"
            height="4.5rem"
            :src="userInfo.avatar"
            v-if="ifLongin"
            fit="cover"
          />
          <van-image
            round
            width="4.5rem"
            height="4.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
            v-else
            fit="cover"
          />
          <p class="Myname">{{ userInfo.nickname }}</p>
        </div>
        <div class="topRight">
          <div class="MyPersonal" @click="GoPersonal" v-if="ifLongin">
            编辑资料
          </div>
          <div class="MyPersonal" @click="BackToLongin" v-else>登录/注册</div>
        </div>
      </div>

      <div class="topBottom">
        <div class="bottomLeft">
          <p class="p1">{{publish_num}}</p>
          <p class="p2">头条</p>
        </div>
        <div class="bottomRight">
          <p class="p1">{{liked_num}}</p>
          <p class="p2">获赞</p>
        </div>
      </div>
    </div>
    <div class="Mycenter">
      <van-grid clickable :column-num="2">
        <van-grid-item icon="star-o" text="收藏" to="/" />
        <van-grid-item icon="clock-o" text="历史" url="" />
      </van-grid>
    </div>
    <div class="DownBox">
      <van-cell title="修改密码" @click="UpDataPassword" />
      <van-cell title="联系我们"  />
      <van-cell title="关于我们"  />
    </div>

    <van-button block @click="Golongin" v-model="Golongin" v-if="ifLongin"
      >退出登录</van-button
    >
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "MyBox",
  computed: {
    ...mapState(["uid", "token", "userInfo", "ifLongin","publish_num","liked_num"]),
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    ...mapMutations(["Clear"]),

    //退出登录跳转到登录页面
    Golongin() {
      //判断是否退出登录
      this.$dialog
        .confirm({
          message: "你确定要离开小莱么？",
        })
        .then((res) => {
          localStorage.clear();
          this.Clear();
          setTimeout((v) => {
            this.$router.replace("/ToLongin");
          }, 0);
          setTimeout((v) => {
            this.$router.replace("/TheLongin");
          }, 800);
        })
        .catch((reg) => {
          this.$toast("我就知道你舍不得离开小莱");
        });
    },

    //跳转到个人信息中心
    GoPersonal() {
      setTimeout((v) => {
        this.$router.replace("/ToLongin");
      }, 0);
      setTimeout((v) => {
        this.$router.replace("/PersonalCenter");
      }, 800);
    },
    //未登录跳转到登录页面
    BackToLongin() {
      setTimeout((v) => {
        this.$router.replace("/ToLongin");
      }, 0);
      setTimeout((v) => {
        this.$router.replace("/TheLongin");
      }, 800);
    },
    //修改密码
    UpDataPassword() {
      let { ifLongin } = this;
      if (ifLongin) {
        setTimeout((v) => {
          this.$router.replace("/ToLongin");
        }, 0);
        setTimeout((v) => {
          this.$router.replace("/UpDatapwd");
        }, 800);
      }else if(!ifLongin){
        this.$toast('你还未登录哦')
      }
    },
  },
};
</script>




<style lang="scss" scoped>
#MyBox {
  height: 177.8vw;
  background-color: #f7f8fa;
}

.Myheader {
  background: url("../img/Mybkg.png");
  background-size: 100%;
}
.TopMy {
  display: flex;
  justify-content: space-between;
}
.topLeft {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-left: 15px;
}
.Myname {
  margin-left: 10px;
  color: #fff;
}
.topRight {
  display: flex;
  width: 100px;
  align-items: center;
}
.MyPersonal {
  margin-top: 20px;
  width: 70px;
  background-color: #04b4fa;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  text-align: center;
}
.topBottom {
  height: 75px;
  background: url("../img/Mybkg.png") no-repeat;
  background-size: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #04b4fa;
  text-align: center;
}
.p1 {
  margin-bottom: 0px;
}
.p2 {
  font-size: 12px;
  margin-top: 1px;
}
.bottomLeft {
  width: 100px;
}
.bottomRight {
  width: 100px;
}
::v-deep .van-icon-star-o::before {
  color: red;
}
::v-deep .van-icon-clock-o::before {
  color: rgb(255, 149, 0);
}

.DownBox {
  margin-top: 5px;
}
::v-deep span {
  color: #000;
}

::v-deep .van-button--block {
  background-color: #fff;
  margin-top: 5px;
  border: #fff;
}

::v-deep .van-button__text {
  color: red;
}
</style>